import { defineComponent, ref, reactive } from "vue";
import Popup from "@/components/Popup/Popup";
import styles from "./Resubmit.module.less";
import { LoadingOutlined, UploadOutlined, FileOutlined } from "@ant-design/icons-vue";
import to from "await-to-js";
import { $upload } from "@/apis/common/upload/upload";
import fetchBase64AsUint8Array from "@/common/utils/fetchBase64AsUint8Array";
import pako from "pako";
import uint8Array2Base64 from "@/common/utils/uint8Array2Base64";
import { message } from "ant-design-vue";
export default defineComponent({
  props: {
    service: {
      type: Object,
    }
  },
  emits: ["success"],
  setup(props, { expose, emit }) {
    const popupRef = ref(null as any);
    const state = reactive({
      record: null,
      form: {
        midFile: null as string | null,
        json: null as string | null,
      },
      midFile_loading: false,
    })
    const open = async (record) => {
      state.record = record;
      state.form.midFile = record.midFile;
      let events_pako_return = "";
      const uint8Arr = await fetchBase64AsUint8Array(record?.content);
      events_pako_return = new TextDecoder().decode(pako.inflate(uint8Arr));
      events_pako_return = decodeURIComponent(events_pako_return);
      const contentJson = JSON.parse(events_pako_return);
      let events_pako_return2 = "";
      const uint8Arr2 = await fetchBase64AsUint8Array(record?.contentTwoFour);
      events_pako_return2 = new TextDecoder().decode(pako.inflate(uint8Arr2));
      events_pako_return2 = decodeURIComponent(events_pako_return2);
      const contentJson2 = JSON.parse(events_pako_return2);
      const json = {
        "2": contentJson2,
        "4": contentJson,
      }
      state.form.json = JSON.stringify(json);
      popupRef.value.open();
    }
    // 上传mid文件
    const beforeUploadMidFile = async (file) => {
      state.midFile_loading = true;
      const formData = new FormData();
      formData.append("file", file);
      const [err, res]: any = await to($upload(formData));
      if (err) {
        state.form.midFile = null;
        state.midFile_loading = false;
        return;
      }
      state.form.midFile = res.data?.data?.ossUpload?.fileUrl || null;
      state.midFile_loading = false;
      return false;
    }
    const getContent = async (jsonStr) => {
      try {
        const json = JSON.parse(jsonStr);
        const contentTwoFourJson = json?.["2"];
        const contentJson = json?.["4"];
        const contentTwoFourObjStr = JSON.stringify(contentTwoFourJson);
        let event = encodeURIComponent(contentTwoFourObjStr);
        let events_pako = pako.deflate(event);
        let contentTwoFour: any = await uint8Array2Base64(events_pako);
        const contentObjStr = JSON.stringify(contentJson);
        let event2 = encodeURIComponent(contentObjStr);
        let events_pako2 = pako.deflate(event2);
        let content: any = await uint8Array2Base64(events_pako2);
        return [contentTwoFour, content];
      } catch (err) {
        return [null, null];
      }
    }
    const submit = async () => {
      const jsonStr = state.form.json;
      const [contentTwoFour, content] = await getContent(jsonStr);
      if (!contentTwoFour || !content) {
        message.error("内容JSON有误,请重新填写!");
        return;
      }
      const [err, res]: any = await to(props.service?.resubmit(state.record, { midFile: state.form.midFile, content, contentTwoFour }));
      if (!err) {
        message.success("重传成功!");
        popupRef.value.close();
        emit("success");
      }
    }
    expose({
      open,
    })
    return () => (
      <Popup ref={popupRef} title="重传支体" width="800px" oriState={state} v-slots={{
        footer: () => <>
          <a-button type="primary" onClick={() => { submit() }}>提交</a-button>
          <a-button onClick={() => { popupRef.value.close() }}>关闭</a-button>
        </>
      }}>
        <div class={styles.container}>
          <div class={styles.formBox}>
            <a-form required model={state.form} label-col={{ style: { width: '130px', marginRight: '10px' } }} wrapper-col={{ span: 28 }}>
              <a-form-item required label="mid文件" name="midFile">
                <a-upload show-upload-list={false} before-upload={beforeUploadMidFile}>
                  <a-button>
                    {state.midFile_loading ? <LoadingOutlined /> : <UploadOutlined />}
                    上传文件
                  </a-button>
                </a-upload>
                <div class={styles.midFile}>
                  <FileOutlined />
                  <span class={styles.fileNameBox}>
                    {state.form.midFile ? <span class={styles.fileName}>{state.form.midFile}</span> : <span class={styles.noFile}>暂未上传</span>}
                  </span>
                </div>
              </a-form-item>
              <a-form-item required label="内容JSON" name="json">
                <a-textarea v-model:value={state.form.json} placeholder="请填写内容JSON" />
              </a-form-item>
            </a-form>
          </div>
        </div>
      </Popup>
    )
  }
})